<template>
	<div class="p p2">
		<div class="p2context">
			<h1 :class="{'slidein':index==2}">教育背景</h1>
			<ul>
				<transition name="opacity" class="transitionbox">
					<li v-if="fshow">
						<p>2018.09-2021.06</p>
						<h2>深圳信息职业技术学院</h2>
						<h3>软件学院&nbsp;<span>软件技术</span></h3>
					</li>
				</transition>
				<transition name="opacity">
					<li v-if="fshow">
						<h2>主修课程</h2>
						<h3>JavaScript，JQuery，Vue，H5，CSS，Mysql，PS，微信小程序</h3>
					</li>
				</transition>
				<transition name="opacity">
					<li v-if="fshow">
						<h2>荣获证书</h2>
						<h3>java二级，1+web中级，c1驾驶证</h3>
					</li>
				</transition>
				<transition name="opacity">
					<li v-if="fshow">
						<h2>荣获奖励</h2>
						<h3>学业奖学金3等奖</h3>
					</li>
				</transition>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ['index', 'fshow'],
		methods: {

		},
		mounted() {

		}
	}
</script>

<style>
	@keyframes slidein {
		25% {
			transform: translateY(-15px);
			opacity: 0;
		}

		50% {
			transform: translateY(10px);
			opacity: 0.5;
		}

		100% {
			transform: translateY(0px);
			opacity: 1;
		}
	}

	.p2 {
		background-color: #333333;
		color: white;
		text-align: center;
		position: relative;
	}

	.p2>.p2context {
		width: 700px;
		height: 400px;
		padding: 20px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.p2context>h1 {
		margin-bottom: 20px;
		font-size: 50px;
		letter-spacing: 0.425rem;
	}

	.slidein {
		animation: slidein 2s linear;
	}

	.p2context>h2 {
		font-size: 30px;
	}

	.p2context>ul>li {
		margin: 10px 0 20px;
	}

	.opacity-enter,
	.opacity-leave-to {
		opacity: 0;
		transform: scale(1);
	}

	.opacity-enter-to,
	.opacity-leave {
		opacity: 1;
		transform: scale(1.2);
	}

	.opacity-enter-active,
	.opacity-leave-active {
		transition: all 1.5s linear;
	}

	.opacity-enter-active:nth-child(2) {
		transition-delay: 0.5s;
	}

	.opacity-enter-active:nth-child(3) {
		transition-delay: 1s;
	}

	.opacity-enter-active:nth-child(4) {
		transition-delay: 1.5s;
	}

	.p2context>ul>li>h3>span {
		color: #66B1FF;
	}
</style>
